<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>TODO supply a title</title>
    </head>
    <h:body>
        <ui:composition template="WEB-INF/template/master.xhtml">
            <ui:define name="content">
                <h1>JSF-Chart-Beispiel</h1>
               <h:form id="spielForm" style="position: relative;left: 10px; top: 10px;">
                    <h:panelGrid  columns="1">

                        <p:tabView style="width: 770px">

                            <p:tab title="Hauptstatistik">
                                <h:panelGrid columns="2" cellpadding="10">
                                    <!--                                    <p:graphicImage value="/images/godfather/godfather1.jpg" />  -->
                                    <p:pieChart value="#{bean.pieModel}" legendPosition="nw"
                                                title="Sample Pie Chart" style="width:670px;height:500px" />
                                    <br/>
                                    <p:barChart value="#{bean.ceartesianModel}" legendPosition="ne"
                                                title="Basic Bar Chart" min="0" max="200" style="width:670px;height:500px"/>
                                    <br/>
                                    <p:barChart value="#{bean.ceartesianModel}" legendPosition="ne" style="width:670px;height:500px"
                                                title="Stacked Bar Chart" stacked="true" barMargin="150" min="0" max="300"/>
                                </h:panelGrid>
                            </p:tab>

                            <p:tab title="Spielerstatistik">
                                <h:panelGrid columns="2" cellpadding="10">
                                    <!--                                    <p:graphicImage value="/images/godfather/godfather2.jpg" />-->
                                    <p:lineChart value="#{bean.ceartesianModel}" legendPosition="e"
                                                 title="Category Chart" minY="0" maxY="200" style="width:670px;height:500px"/>
                                    <br/>
                                    <p:bubbleChart value="#{bean.bubbleModel}" xaxisLabel="Price" yaxisLabel="Labels"
                                                   title="Sample Bubble Chart" style="width:670px;height:500px" />
                                </h:panelGrid>
                            </p:tab>

                            <p:tab title="Fragenstatistik" >
                                <h:form>
                                    <h:panelGrid columns="2" cellpadding="10">
                                        <!--                                    <p:graphicImage value="/images/godfather/godfather3.jpg" />-->
                                        <p:growl id="growl2" showDetail="true" />
                                        <p:pieChart value="#{bean.pieModel}" legendPosition="w"
                                                    title="Interactive Pie Chart" style="width:670px;height:500px">
                                            <p:ajax event="itemSelect" listener="#{statisticBean.itemSelect}" update="growl2" />
                                        </p:pieChart>
                                        <br/>
                                        <p:barChart value="#{bean.ceartesianModel}" legendPosition="ne"
                                                    title="Interactive Bar Chart" style="width:670px;height:500px">
                                            <p:ajax event="itemSelect" listener="#{bean.itemSelect}" update="growl2" />
                                        </p:barChart>
                                    </h:panelGrid>
                                </h:form>
                            </p:tab>

                        </p:tabView>
                        <br/><br/>
                        <p:lightBox iframe="true" width="80%" height="80%" style="font-size: x-large; text-align: center; text-decoration: blink;">
                            <h:outputLink value="rulesMC.xhtml" title="PrimeFaces-Charts">
                                <h:outputText value="PrimeFaces-Charts"/>
                            </h:outputLink>
                        </p:lightBox>
                        <br/><br/><br/><br/><br/><br/><br/><br/>

                        <p:growl id="growl" showDetail="true" />
                        <p:pieChart value="#{bean.pieModel}" legendPosition="w"
                                    title="Interactive Pie Chart" style="width:200px;height:120px">
                            <p:ajax event="itemSelect" listener="#{bean.itemSelect}" update="growl" />
                        </p:pieChart>

                        <p:barChart value="#{bean.ceartesianModel}" legendPosition="ne"
                                    title="Interactive Bar Chart" style="width:200px;height:120px">
                            <p:ajax event="itemSelect" listener="#{bean.itemSelect}" update="growl" />
                        </p:barChart>
                    </h:panelGrid>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
